<template>
  <!-- 分页表格，自定义数据,后端分页(目前只有crm商机列表使用) -->
  <fragment>
    <div class="table-list-box">
      <el-table
        ref="table"
        v-loading="loading"
        row-key="t_index"
        :height="height"
        highlight-current-row
        :data="paginationData.data"
        header-row-class-name="table-list-header"
        @current-change="handleCurrentChange"
        @selection-change="selcetiongChange"
      >
        <slot></slot>
      </el-table>
      <el-pagination
        v-if="paginationData.data&&paginationData.data.length"
        :current-page="paginationData.page"
        :page-sizes="[10,20,50,100, 200, 300, 400]"
        :page-size="paginationData.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paginationData.total"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
  </fragment>
</template>
<script>
import request from '@/utils/request'
import { paramsForUrl } from '@/api/crm'
export default {
  name: 'TableBoxPage',
  inheritAttrs: false,
  props: {
    height: {
      type: String,
      default: '300px'
    },
    selectedArry: {
      // 选中的数据
      type: [Array, Object],
      default: () => {
        return []
      }
    },
    url: {
      type: String,
      default: ''
    },
    params: {
      type: [Object, Array],
      default: () => { return {} }
    }
  },
  data() {
    return {
      loading: false,
      tableData: [],
      paginationData: {
        data: [],
        page: 1,
        size: 10,
        total: 0
      },
      currentRow: null
    }
  },
  methods: {
    initData(type) {
      const page = type ? 1 : this.paginationData.page
      const requstObj = JSON.parse(JSON.stringify(this.params))
      requstObj.page = page
      requstObj.rows = this.paginationData.size
      this.loading = true
      request({
        url: this.url + paramsForUrl(requstObj),
        method: 'post',
        data: requstObj
      }).then(res => {
        this.loading = false
        if (res.success === 1) {
          this.$set(this.paginationData, 'data', res.data.records)
          this.$set(this.paginationData, 'total', res.data.total)
          this.$set(this.paginationData, 'page', page)
        }
      }).catch(er => { this.loading = false })
    },
    handleCurrentChange(val) {
      this.currentRow = val
      // 选中行
      this.$emit('clickRow', val)
    },
    handleSizeChange(size) {
      this.paginationData.size = size
      this.$nextTick(() => {
        this.initData()
      })
    },
    handlePageChange(page) {
      this.paginationData.page = page
      this.$nextTick(() => {
        this.initData()
      })
    },
    selcetiongChange(val) {
      this.$emit('selcetiongChange', val)
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
